<template>
  <div class="confirm" v-show="isShow">
    <div class="mask" @click="isShow = false"></div>
    <div class="window">
      <p class="msg">{{ msg }}</p>
      <div class="btns flex">
        <div class="btn" @click="$emit('sure')">确定</div>
        <div class="btn" @click="isShow = false">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["msg"],
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    hige() {
      this.isShow = false;
    },
    show() {
      this.isShow = true;
    },
  },
};
</script>
<style lang="less" scoped>
.confirm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .window {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translate(-50%);
    width: 300px;
    background-color: #fff;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 10px;
    .msg {
      text-align: center;
      padding: 20px 0;
    }
    .btns {
      justify-content: space-around;
      .btn {
        width: 40%;
        height: 30px;
        background-color: #4488ff;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
      }
    }
  }
}
</style>